<template>
    <div class="common-layout">
        <el-row>
            <el-col :span="24">
                <el-select v-model="state.selected" class="m-2" placeholder="Select" 
                @change="change"
                size="large">
                    <el-option v-for="item in state.options" :key="item" :label="item" :value="item">
                        {{ item }}
                    </el-option>
                </el-select>

                <el-text> 数量：{{ state.data.length }} </el-text>
                <copy-stocks-to-clipboard :data="state.data" />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
            <el-table :data="state.data" height="700" style="width: 100%"
            @sort-change="sortChange"
            @cell-click="cellClick"
            :default-sort="state.sort"
            :cell-class-name="tableCellClassName"
             >
                <el-table-column prop="date" label="日期" sortable width="110" />
                <el-table-column prop="stock" label="股票" width="150">
                    <template #default="scope">
                        <ToStockDetail :stock="scope.row.stock" />
                    </template> 
                </el-table-column>
                <el-table-column prop="close" label="价格" width="100"/>
                <el-table-column prop="industry" label="行业" width="150" sortable/>
                <el-table-column prop="monthPct" label="月涨跌" sortable  width="100"/>
                <el-table-column prop="nextMonthPct" label="下月涨跌" sortable  width="120"/>
                <el-table-column prop="lp" label="分位点" sortable width="120" />
                <el-table-column prop="relLP" label="相对分位点" sortable width="120" />
                <el-table-column prop="lpDecrease" label="下跌幅度" sortable width="120" />
                <el-table-column prop="lpDuration" label="持续月数" sortable width="120" />
                <el-table-column prop="incNum" label="incNum" sortable width="100" />
                <el-table-column prop="category" label="类别" width="120" />
            </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import ToStockDetail from './ToStockDetail.vue';
import { getIncNumClassName, getSessionStorage, setSessionStorage } from '../utils/help';
import CopyStocksToClipboard from './CopyStocksToClipboard.vue';
import { getMonthLpDecrease } from '../service/month';

const base = "MonthLpDecrease"
const selectKey = base + "Select"
const industrySelectKey = base + "Industry" + "Select"
const sortPropKey = base + "SortProp"
const sortOrderKey = base + "SortOrder"

const state = reactive({
    rawData: [],
    data: [],
    options: [],
    sourceSelected: "",
    selected: getSessionStorage(selectKey) || "",
    sort: { 
        prop: getSessionStorage(sortPropKey) || 'monthPct' , 
        order: getSessionStorage(sortOrderKey) || 'descending' 
    }
})

const loadData = (selected) => {
    // 初始化数据
    getMonthLpDecrease(selected).then(res => {
        state.rawData = res.data.data
        state.options = res.data.dates
        if (!selected) {
            state.selected = state.options[0]
        } 

        state.data = state.rawData
    })
}

loadData(state.selected)

const sortChange = (column, prop, order) => {
    setSessionStorage(sortPropKey, column.prop)
    setSessionStorage(sortOrderKey, column.order)
}

const change = () => {
    setSessionStorage(selectKey, state.selected)
    loadData(state.selected)
}
const cellClick = (row, column, cell, event) => {
    var columnProperty = column.property
    if (['industry','lpDuration','incNum','category'].includes(columnProperty)) {
        let val = row[columnProperty]
        if (state.sourceSelected != ""  &&  state.sourceSelected == val) {
            state.sourceSelected = ""
            state.data = state.rawData
        } else {
            state.sourceSelected = val
            state.data = state.rawData.filter(item => item[columnProperty] == val)
        }
    }
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    var columnProperty = column.property
    if ((columnProperty=="nextMonthPct")  && (row.nextMonthPct < 0)) {
        return 'lt0-cell'
    }

    if (columnProperty == "incNum") {
        return getIncNumClassName(row.incNum)
    }

    return ''
}
</script>